<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="hdModule" v-show="isShowAni">
      <div class="hdBox publicVCenter">
        <div class="title publicHvCenter">互动</div>
        <div class="hdTypeList">
          <div
            class="hdTypeItem publicVCenter"
            v-tap="{ methods: openPopupModule, key: photoModuleKey }"
            v-if="giftSendVisible"
          >
            <div class="box"><img src="@/assets/image/hd2/photoType.png" /></div>
            <div class="desc">现场照片</div>
          </div>
          <div class="hdTypeItem publicVCenter" v-if="giftSendVisible" v-tap="{ methods: toPhotoWall }">
            <div class="box"><img src="@/assets/image/hd2/loveType.png" /></div>
            <div class="desc">照片墙</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import { POPUP_MODULE } from '@/assets/constant/index';
import { timeoutTask } from '../../utils';

const wx = require('weixin-js-sdk');

export default {
  name: 'hdPopup',
  computed: {
    ...mapState({
      giftSendVisible: (state) => state.app.giftSendVisible,
    }),
  },
  created() {},
  mounted() {
    // 执行弹出动画
    this.showAniStart();
  },
  data() {
    return {
      isShowAni: false, // hd box弹出动画
      photoModuleKey: POPUP_MODULE.photoModule.key,
    };
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
    }),
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    openPopupModule(e) {
      this.togglePopup();
      timeoutTask(() => {
        this.togglePopup(e.key);
      }, 200);
    },
    toPhotoWall() {
      console.log('/pages/photoWall/photoWall');
      wx.miniProgram.navigateTo({
        url: '/pages/photoWall/photoWall',
      });
    },
  },
};
</script>
<style lang="less" scoped>
.hdModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .hdBox {
    width: 750px;
    height: 440px;
    background: #ffffff;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    flex-direction: column;
    .title {
      width: 410px;
      height: 76px;
      background: linear-gradient(276deg, #ff7171 0%, #e42c2c 100%);
      border-radius: 0px 0px 20px 20px;
      font-size: 40px;
      font-weight: 500;
      color: #ffffff;
    }
    .hdTypeList {
      display: flex;
      margin-top: 64px;
      .hdTypeItem {
        flex-direction: column;
        margin: 0 24px;
        .box {
          width: 140px;
          height: 140px;
          border-radius: 8px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .desc {
          font-size: 28px;
          margin-top: 20px;
        }
        &:nth-child(1) {
          .box {
            background: linear-gradient(276deg, #ff81fc 0%, #ff3f75 100%);
          }
        }
        &:nth-child(2) {
          .box {
            background: linear-gradient(276deg, #c571ff 0%, #e42cd5 100%);
          }
        }
        &:nth-child(3) {
          .box {
            background: linear-gradient(276deg, #ff7171 0%, #e42c2c 100%);
          }
        }
      }
    }
  }
}
</style>
